<template>
	<view class="img-v" v-if="src && !isError" :style="{'width': width + 'rpx', 'height': height + 'rpx',
			 'borderTopLeftRadius': radiusTopLeft + 'rpx', 'borderTopRightRadius': radiusTopRight + 'rpx',
			 'borderBottomLeftRadius': radiusBottomLeft + 'rpx', 'borderBottomRightRadius': radiusBottomRight + 'rpx'}">
			 
		<view @click="showBigImg">
			<image
				:src="src" 
				 @error="imgError"
				 @load="imgLoaded"
				 :style="{'width': width + 'rpx', 'height': height + 'rpx', 
				 'borderTopLeftRadius': radiusTopLeft + 'rpx', 'borderTopRightRadius': radiusTopRight + 'rpx',
				 'borderBottomLeftRadius': radiusBottomLeft + 'rpx', 'borderBottomRightRadius': radiusBottomRight + 'rpx'}"
			></image>
			<view class="show-img-layer" v-if="isShowBigImg" :style="{'height': windowHeight + 'px'}" @click.stop="hideLayer">
				<image :src="src" mode="widthFix"></image>
			</view>
		</view>	
			 
		<view class="img-v loading-img" v-if="isLoading" :style="{'width': width + 'rpx', 'height': height + 'rpx',
			 'borderTopLeftRadius': radiusTopLeft + 'rpx', 'borderTopRightRadius': radiusTopRight + 'rpx',
			 'borderBottomLeftRadius': radiusBottomLeft + 'rpx', 'borderBottomRightRadius': radiusBottomRight + 'rpx',
			 'background': emptyBgColor}">
			<image 
				:src="emptyImgUrl ? emptyImgUrl : '../../static/empty-icon.png'"
				:style="{'width': mWidth + 'rpx', 'height': mHeight + 'rpx'}"
			></image>
		</view>
	</view>
	
	<view class="img-v" v-else :style="{'width': width + 'rpx', 'height': height + 'rpx',
		 'borderTopLeftRadius': radiusTopLeft + 'rpx', 'borderTopRightRadius': radiusTopRight + 'rpx',
		 'borderBottomLeftRadius': radiusBottomLeft + 'rpx', 'borderBottomRightRadius': radiusBottomRight + 'rpx',
		 'background': emptyBgColor}">
		<image
			:src="emptyImgUrl ? emptyImgUrl : '../../static/empty-icon.png'"
			:style="{'width': mWidth + 'rpx', 'height': mHeight + 'rpx'}"
		></image>
	</view>
	
</template>

<script>
	export default {
		name: 'wolf-image',
		props: {
			src: {//展示图片路径
				type: String,
				default: '',
				required: true
			},
			width: {//图片宽度 单位rpx
				type: Number,
				default: 0,
				required: true
			},
			height: {//图片高度 单位rpx
				type: Number,
				default: 0,
				required: true
			},
			radiusTopLeft: {//圆角 左上
				type: Number,
				default: 0
			},
			radiusTopRight: {//圆角 右上
				type: Number,
				default: 0
			},
			radiusBottomLeft: {//圆角 左下
				type: Number,
				default: 0
			},
			radiusBottomRight: {//圆角 右下
				type: Number,
				default: 0
			},
			mWidth: {//占位/缺省图 图片宽度 单位rpx
				type: Number,
				default: 0,
				required: true
			},
			mHeight: {//占位/缺省图 图片高度 单位rpx
				type: Number,
				default: 0,
				required: true
			},
			emptyBgColor: {//无图片/加载失败时占位的背景色, 默认白色
				type: String,
				default: '#FFFFFF'
			},
			emptyImgUrl: {//占位/缺省图 图片地址 不传显示本地默认图 ../../static/empty-icon.png
				type: String,
				default: ''
			},
			needShowBigImg: {////用于控制是否需要图片放大预览，true可放大 ， false不可放大；为true时，需要传windowHeight值
				type: Boolean,
				default: false
			},
			windowHeight: {//屏幕高度，用于图片放大预览 单位px。当needShowBigImg为true时，必传
				type: Number,
				default: 0
			}
		},
		data() {
			return {
				isError: false,
				isLoading: true,
				isShowBigImg: false
			}
		},
		methods: {
			imgError() {
				this.isError = true
			},
			imgLoaded(){
				this.isLoading = false
			},
			hideLayer(){
				this.isShowBigImg = false
			},
			showBigImg(){
				if(this.needShowBigImg){
					this.isShowBigImg = true
				}
			}
		}
	}
</script>

<style scoped lang="scss">
	.img-v{
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
	}
	.loading-img{
		position: absolute;
		z-index: 2;
	}
	.show-img-layer{
		width: 100%;
		background: rgba(0, 0, 0, 0.9);
		position: fixed;
		z-index: 8;
		left: 0;
		bottom: 0;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		image{
			width: 100%;
		}
	}
</style>